<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Client APP Demo</title>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>
<script type="text/javascript">


$(document).ready(function() {

  //   $('#gotoOP').click(function() {
  //   	var lpURI = $('#lp_uri').val();
  //   	var data = {
		//   	"client_id": $('#client_id').val(),
		//   	"tenant_id": $('#tenant_id').val(),
		//   	"user_type": $('#user_type').val(),
		//   	"view_format": $('#view_format').val(),
		//   	"redirect_uri": $('#redirect_uri').val(),
		//   	"X-Okapi-Token": $('#X-Okapi-Token').val(),
		//   	"expire": $('#expire').val(),
		//   	"userid": $('#userid').val(),
		//   	"username": $('#username').val(),
		//   	"lp_sign": $('#lp_sign').val(),
		//   	"sign": $('#sign').val()
		//   };
		// fetch(lpURI, {
		//   method: "POST",
		//   headers: {
		//     "Content-Type": "application/json; text/plain;",
		//     "Accept": "application/json; text/plain;"
		//   },
		//   body: JSON.stringify(data)
		// }).then(function(res) {
		//   if (res.ok) {
		//     return res.json();
		//   } else if(res.status == 302){
		//     alert(res.header);
		//   } else{
		//     alert(res.status);
		//   }
		// }, function(e) {
		//   alert(e);
		// }).then(function(data) {
  //   		alert(JSON.stringify(data));
  // 		}).catch(function(e) {
  //   		alert(e);
  // 		});
  //   });

    $('#gotoOP').click(function() {
    	var lpURI = $('#lp_uri').val();
    // 	var data = {
		  // 	"client_id": $('#client_id').val(),
		  // 	"tenant_id": $('#tenant_id').val(),
		  // 	"user_type": $('#user_type').val(),
		  // 	"view_format": $('#view_format').val(),
		  // 	"redirect_uri": $('#redirect_uri').val(),
		  // 	"X-Okapi-Token": $('#X-Okapi-Token').val(),
		  // 	"expire": $('#expire').val(),
		  // 	"userid": $('#userid').val(),
		  // 	"username": $('#username').val(),
		  // 	"lp_sign": $('#lp_sign').val(),
		  // 	"sign": $('#sign').val()
		  // };
		//   $.ajax({
		//     url: lpURI,
		//     type: 'POST',
		//     data: JSON.stringify(data),
		//     success: function(result,status,xhr){
		//     	alert(JSON.stringify(result));
		//     },
		//     complete: function(jqXHR){
		//         alert(jqXHR.status);
		//         console.log(jqXHR.status);
		//     },
		//     error: function (xhr) {
		//     	alert(xhr.status);
		//         console.log(xhr.status);
		//     }
		// });
	  	var client_id=$('#client_id').val();
	  	var tenant_id=$('#tenant_id').val();
	  	var user_type=$('#user_type').val();
	  	var view_format=$('#view_format').val();
	  	var redirect_uri = encodeURIComponent($('#redirect_uri').val());
	  	var token = $('#X-Okapi-Token').val();
	  	var expire = $('#expire').val();
	  	var userid = $('#userid').val();
	  	var username = $('#username').val();
	  	var lp_sign = $('#lp_sign').val();
	  	var sign = $('#sign').val();

		var data = "?client_id="+client_id
					+"&tenant_id="+tenant_id
					+"&user_type="+user_type
					+"&view_format="+view_format
					+"&redirect_uri="+redirect_uri
					+"&X-Okapi-Token="+token
					+"&expire="+expire
					+"&userid="+userid
					+"&username="+username
					+"&sign="+sign
					+"&lp_sign="+lp_sign

		window.location.href = lpURI + data;
		
    });

});
</script>
</head>
<body>
	<div class="navbar navbar-default">
		<div class="container ">
			<p class="navbar-text">Client APP Demo</p>
		</div>
	</div>
	<div class="container ">
		<div class="row">
			<div class="col-md-9">
				<div class="list-group">
				</div>
				<div class="list-group">
					<div class="list-group-item">
						<form class="form-horizontal" name="pre-login-form"
							action="/oplogin" method="post" target="_blank">
							<div class="form-group">
								<label class="col-md-4 control-label" for="client_id">client id</label>
								<div class="col-md-4">
									<input id="client_id" name="client_id" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>							
							<div class="form-group">
								<label class="col-md-4 control-label" for="tenant_id">tenant</label>
								<div class="col-md-4">
									<input id="tenant_id" name="tenant_id" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="user_type">user type</label>
								<div class="col-md-4">
									<input id="user_type" name="user_type" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="view_format">view format</label>
								<div class="col-md-4">
									<input id="view_format" name="view_format" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="redirect_uri">redirect uri</label>
								<div class="col-md-4">
									<input id="redirect_uri" name="redirect_uri" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="sign">sign</label>
								<div class="col-md-4">
									<input id="sign" name="sign" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="X-Okapi-Token">X-Okapi-Token</label>
								<div class="col-md-4">
									<input id="X-Okapi-Token" name="X-Okapi-Token" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="expire">expire</label>
								<div class="col-md-4">
									<input id="expire" name="expire" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="userid">userid</label>
								<div class="col-md-4">
									<input id="userid" name="userid" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="username">username</label>
								<div class="col-md-4">
									<input id="username" name="username" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="lp_uri">lp uri</label>
								<div class="col-md-4">
									<input id="lp_uri" name="lp_uri" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="lp_sign">lp_sign</label>
								<div class="col-md-4">
									<input id="lp_sign" name="lp_sign" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-md-4 control-label" for="gotoOP"></label>
								<div class="col-md-8">
									<input id="gotoOP" name="gotoOP" type="button"
										class="btn btn-default" value="lsp跳转到OpenAPI"></input>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-md-3"></div>
		</div>
	</div>
	<footer class="footer"></footer>
</body>
</html>
